<template>
  <div class="pie-main"
       id="main"></div>
</template>

<script>
const echarts = require('echarts')

export default {
  props: {
    value: Array,
    text: String,
    subtext: String
  },
  created() {

  },
  data() {
    return {

    }
  },
  watch: {

  },
  mounted () {
    this.showEchats()
  },

  // watch:{
  //   option() {
  //     debugger
  //     console.log(this.option)
  //   }
  // },

  methods: {
    showEchats() {
      const myChart = echarts.init(document.getElementById('main'));
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          backgroundColor: 'transparent',
          icon: 'circle'
        },
        series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['45%', '60%'],
              center: ['50%', '52%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '24'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                // { value: 12, name: '部分通过场景', itemStyle:{normal:{color: "#efae00"}}},
                // { value: 11, name: '全部失败场景', itemStyle:{normal:{color: "#ea4056"}}},
                // { value: 12, name: '全部通过场景   ',itemStyle:{normal:{color: "#19BE6B"}}},
                { value: this.value[0].value, name: this.value[0].name ,itemStyle:{normal:{color: "#19BE6B"}}},
                { value: this.value[1].value, name: this.value[1].name ,itemStyle:{normal:{color: "#ea4056"}}},

              ]
            }
          ]
      };
      // console.log(option)
      myChart.setOption(option);
      }
    },


};
</script>

<style>
.pie-main {
  width: 380px;
  height: 400px;
  padding: 28px;
  background: #fff;
}
</style>
